//本地存储
//一、 Web Storage
//1.1 Web Storage 示例
// //seeionStorage 示例
// function saveStorage(id){//保存
//     var target=document.getElementById(id);
//     var str =target.value;
//     sessionStorage.setItem("message",str);
// }

// function loadStorage(id){//读取数据
//     var target=document.getElementById(id);
//     var msg=sessionStorage.message;
//     target.innerHTML=msg;
// }

// // localStorage 示例
// function saveStorage(id){
//     var target =document.getElementById(id);
//     var str = target.value;
//     localStorage.message=str;
// }

// function loadStorage(id){
//     var target=document.getElementById(id);
//     target.innerHTML=localStorage.message;
// }

// // 1.2 简单 web 留言本
// function saveStorage(id){
//     var data =document.getElementById(id).value;
//     var time =new Date().getTime();
//     localStorage.setItem(time,data);
//     console.log("数据保存成功");
//     loadStorage('msg');
// }

// function loadStorage(id){
//     var result='<table class="table table-bordered"><tr><th>留言</th><th>留言时间</th></tr>';
//     for (var i = 0; i <localStorage.length; i++) {
//         var key=localStorage.key(i);
//         var value=localStorage.getItem(key);
//         var date=new Date();
//         date.setTime(key);
//         var datestr=date.toGMTString();
//         result+='<tr><td>'+value+'</td><td>'+datestr+'</td></tr>';
//     	}
//     result +='</table>';
//     var target=document.getElementById(id);
//     target.innerHTML=result;
// }

// function clearStorage(){
//     localStorage.clear();
//     console.log("全部数据清楚。");
//     loadStorage('msg');
// }

// // 1.3 作为简易数据库来运用
// function saveStorage(){
//     var data =new Object;
//     data.userName=document.getElementById("userName").value;
//     data.email=document.getElementById("email").value;
//     data.tel=document.getElementById("tel").value;
//     data.memo=document.getElementById("memo").value;
//     var str = JSON.stringify(data);
//     localStorage.setItem(data.name,str);
//     console.log("数据保存成功！");
// }

// function findStorage(id){
//     var find = document.getElementById(id).value;
//     var str = localStorage.getItem(find);
//     var data=JSON.parse(str);
//     var result='<table class="table table-bordered"><tr><th>姓名</th><th>E-mail</th><th>电话号码</th><th>备注</th></tr>'+
//     '<tr><td>'+data.userName+'</td><td>'+data.email+'</td><td>'+data.tel+'</td><td>'+data.memo+'</td></tr></table>';
//     document.getElementById(id).innerHTML=result;
// }

// // 1.4 用 storage 事件实时监控 web Storage 中的数据
// window.addEventListener('storage',function(event){
//     if (event.key=="test") {
//         var output =document.getElementById('output');
//         output.innerHTML='原有值：'+event.newValue;
//         putput.innerHTML+='<br/>新值：'+event.oldValue;
//         output.innerHTML+='<br/>变动页面地址：'+
//         utf8_decode(unescape(event.url));
//         console.log(event.storageArea);

//         console.log(event.storageArea === localStorage);//输出TRUE
//     }
// },false);

// function utf8_decode(utftext){
//     var string ="";
//     var i=0,
//         c=c1=c2=0;
//     while(i<utftext.length){
//         if (c<128) {
//             string += string.fromCharCode(c);
//         }else if ((c>191)&&(c<224)) {
//             c2=utftext.charCodeAt(i+1);
//             string +=String.fromCharCode(((c&31)<<6)|(c2&63));
//             i+=2;
//         }else{
//             c2=utftext.charCodeAt(i+1);
//             c3=utftext.charCodeAt(i+2);
//             string += String.fromChatCode(((c&15)<<12)|((c2&63)<<6)|(c3&63));
//             i+=3;
//         }
//     }
//     return string;
// }
// //修改内容
// function setLocalStorage(){
//     localStorage.text=document.getElementById("text1").value;
// }


// 二、本地数据库
// 2.3 使用数据库实现 web 留言本
var datatable=null;
var db=openDatabase('MyData','','My Database',102400);

function init(){
    datatable=document.getElementById("show-msg");
}

function removeAllData(){
    for (var i = datatable.childNodes.length - 2; i >= 0; i--) {
    	datatable.removeChild(datatable.childNodes[i]);
    }
}

function showData(row){
    var t = new Date();
    t.setTime(row.time);
    var tr='<tr><td>'+row.uName+'</td><td>'+row.umsg+'</td><td>'+t.toLocaleDateString()+' '+t.toLocaleTimeString()+'</td>';
    datatable.append(tr);
}

function showAllData(){
    db.transaction(function(tx){
        tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(uName text,umsg text,time INTEGER)',[],function(tx,rs){
            console.log("成功创建数据库");
        },function(tx,error){
            console.log(error.source+"::"+error.message);
        });
        tx.executeSql('SELECT * FROM MsgData',[],function(tx,rs){
            removeAllData();
            for (var i = 0; i < rs.rows.length; i++) {
                showData(rs.rows.item(i));
            }
        });
    });
}

function addData(uName,umsg,time){
    db.transaction(function(tx){
        tx.executeSql('INSERT INTO MsgData VALUES(?,?,?)',[uName,umsg,time],function(tx,rs){
            console.log("成功保存数据")
        },function(tx,error){
            console.log(error.source+"::"+error.message);
        });
    });
}

function saveData(){
    var uName=document.getElementById("uName").value;
    var umsg=document.getElementById("umsg").value;
    var time=new Date().getTime();
    addData(uName,umsg,time);
    showAllData();
}